<template>
  <el-form label-position="right" label-width="80">
    <el-form-item label="当前选择">
      <el-input v-model="time" clearable @clear="clearTime" />
    </el-form-item>
    <el-form-item label="秒">
      <div style="display: flex; align-items: center; gap: 8px">
        <el-radio-group v-model="second" @change="generateTime">
          <el-radio-button v-for="opt in secondOptions" :key="opt" :label="opt == 'custom' ? '自定义' : opt" :value="opt" />
        </el-radio-group>
        <el-input-number v-if="second == 'custom'" v-model="secondValue" controls-position="right" @change="generateTime" />
      </div>
    </el-form-item>
    <el-form-item label="分钟">
      <div style="display: flex; align-items: center; gap: 8px">
        <el-radio-group v-model="minute" @change="generateTime">
          <el-radio-button v-for="opt in minuteOptions" :key="opt" :label="opt == 'custom' ? '自定义' : opt" :value="opt" />
        </el-radio-group>
        <el-input-number v-if="minute == 'custom'" v-model="minuteValue" controls-position="right" @change="generateTime" />
      </div>
    </el-form-item>
    <el-form-item label="小时">
      <div style="display: flex; align-items: center; gap: 8px">
        <el-radio-group v-model="hour" @change="generateTime">
          <el-radio-button v-for="opt in hourOptions" :key="opt" :label="opt == 'custom' ? '自定义' : opt" :value="opt" />
        </el-radio-group>
        <el-input-number v-if="hour == 'custom'" v-model="hourValue" controls-position="right" @change="generateTime" />
      </div>
    </el-form-item>
    <el-form-item label="天">
      <div style="display: flex; align-items: center; gap: 8px">
        <el-radio-group v-model="day" @change="generateTime">
          <el-radio-button v-for="opt in otherOptions" :key="opt" :label="opt == 'custom' ? '自定义' : opt" :value="opt" />
        </el-radio-group>
        <el-input-number v-if="day == 'custom'" v-model="dayValue" controls-position="right" @change="generateTime" />
      </div>
    </el-form-item>
    <el-form-item label="月">
      <div style="display: flex; align-items: center; gap: 8px">
        <el-radio-group v-model="month" @change="generateTime">
          <el-radio-button v-for="opt in otherOptions" :key="opt" :label="opt == 'custom' ? '自定义' : opt" :value="opt" />
        </el-radio-group>
        <el-input-number v-if="month == 'custom'" v-model="monthValue" controls-position="right" @change="generateTime" />
      </div>
    </el-form-item>
    <el-form-item label="年">
      <div style="display: flex; align-items: center; gap: 8px">
        <el-radio-group v-model="year" @change="generateTime">
          <el-radio-button v-for="opt in otherOptions" :key="opt" :label="opt == 'custom' ? '自定义' : opt" :value="opt" />
        </el-radio-group>
        <el-input-number v-if="year == 'custom'" v-model="yearValue" controls-position="right" @change="generateTime" />
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import { set } from 'nprogress';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'TimeSelector',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      time: '',
      second: '',
      secondValue: 0,
      minute: '',
      minuteValue: 0,
      hour: '',
      hourValue: 0,
      day: '',
      dayValue: 0,
      month: '',
      monthValue: 0,
      year: '',
      yearValue: 0,
      secondOptions: ['5', '10', '30', '50', 'custom'],
      minuteOptions: ['5', '10', '30', '50', 'custom'],
      hourOptions: ['4', '8', '12', '24', 'custom'],
      otherOptions: ['1', '2', '3', '4', 'custom']
    };
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.time = newVal;
      },
      immediate: true
    },
    time: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal);
      }
    }
  },
  methods: {
    generateTime() {
      const second = this.second == 'custom' ? this.secondValue : this.second;
      const minute = this.minute == 'custom' ? this.minuteValue : this.minute;
      const hour = this.hour == 'custom' ? this.hourValue : this.hour;
      const day = this.day == 'custom' ? this.dayValue : this.day;
      const month = this.month == 'custom' ? this.monthValue : this.month;
      const year = this.year == 'custom' ? this.yearValue : this.year;
      this.time = `P${year && year + 'Y'}${month && month + 'M'}${day && day + 'D'}T${hour && hour + 'H'}${minute && minute + 'M'}${second && second + 'S'}`;
    },
    clearTime() {
      this.time = '';
      this.second = '';
      this.secondValue = 0;
      this.minute = '';
      this.minuteValue = 0;
      this.hour = '';
      this.hourValue = 0;
      this.day = '';
      this.dayValue = 0;
      this.month = '';
      this.monthValue = 0;
      this.year = '';
      this.yearValue = 0;
    }
  }
});
</script>